import { createApp } from 'vue'
import './style.css'
import './utils/common_styles.css'
import App from './App.vue'
import {createRouter, createWebHashHistory} from 'vue-router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
// import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import zhCn from './zh-cn.mjs'
import { isLoggedIn } from './utils/apiUser.js'

import Login from './components/Login.vue'

import TransformerEncoderDecoder from './components/TransformerEncoderDecoder.vue'
import TransformerOneBlock from './components/TransformerOneBlock.vue'
import TransformerInputEncoder from './components/TransformerInputEncoder.vue'
import TransformerEncoderBlock from './components/TransformerEncoderBlock.vue'
import DemoPage from './components/DemoPage.vue'

const routes = [
  { path: '/login', component: Login, meta: {skipAuth: true} },

  { path: '/TransformerOneBlock', component: TransformerOneBlock },
  { path: '/TransformerEncoderDecoder', component: TransformerEncoderDecoder },
  { path: '/TransformerInputEncoder', component: TransformerInputEncoder },
  { path: '/TransformerEncoderBlock', component: TransformerEncoderBlock },
  { path: '/', component: DemoPage },
]

const router = createRouter({
  // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
  history: createWebHashHistory(),
  routes, // `routes: routes` 的缩写
})


router.beforeEach((to, _from, next) => {
  if (!to.meta.skipAuth && !isLoggedIn()) {
    // 添加前置守卫，检查系统是否已经登陆，如果还未登陆，就跳转到/login
    next('/login')
  } else if (to.path==='/login' && isLoggedIn()) {
    // 如果已经登陆，就跳转到我的用户信息
    next('/')
  } else {
    next()
  }
})


const app = createApp(App)

app.use(router)
app.use(ElementPlus, {locale: zhCn})
// app.use(sandiUI)

// 注册所有element icons
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  // console.log('icons', key)
  app.component(key, component)
}
app.config.unwrapInjectedRef = true
app.mount('#app')

